<template>
  <c-dialog ref="dialog" :data="selData" single title="进场" @closed="closedHandle">
    <c-list ref="form" :model="formData" :rules="formRules" label-width="100px">
      <c-list-item label="装修任务号" :value="detail.decorationTaskCode" />
      <c-list-item label="所属门店" :value="detail.shopName" />
      <c-list-item prop="actualApproachTime" label="实际进场时间">
        <el-date-picker
          v-model="formData.actualApproachTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          clearable
        />
      </c-list-item>
      <c-list-item prop="expectEndTime" label="预计完工时间">
        <el-date-picker
          v-model="formData.expectEndTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          clearable
        />
      </c-list-item>
      <c-list-item prop="formSupervisorCode" label="形象督导">
        <c-single-dialog
          ref="formSupervisorCode"
          v-model="formData.formSupervisorCode"
          :label.sync="formData.formSupervisorName"
          :props="{label:'userName',value:'account'}"
          :focus-query="true"
          :multiple="false"
          :config="{
            title:'形象督导',
            width:'600px',
            interfacePath:`/slm-admin/api/v1/user/domainUser/page`,
            method:'post',
            filtersRaw:[],
            paramsRaw:{},
            setting:[
              {prop:'account',title:'编码',width:80},
              {prop:'userName',title:'名字',width:150},
              {prop:'orgName',title:'组织',width:120},
              {prop: 'phone', title: '电话', width: 150}
            ]
          }"
          @change="changeData"
        />
      </c-list-item>
      <c-list-item label="部门">
        {{ orgInfo }}
      </c-list-item>
      <c-list-item>
        <div class="btn-container">
          <c-button @click="cancelHandle">取消</c-button>
          <c-button type="primary" @click="confirmHandle">确认</c-button>
        </div>
      </c-list-item>
    </c-list>
  </c-dialog>
</template>
<script>
import { postInside } from '@/api/decorate'
import { deepClone } from '@/utils'
export default {
  name: 'Approach',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      orgInfo: '',
      formSupervisorDialog: [],
      formData: {
        formSupervisorCode: '',
        formSupervisorName: '',
        actualApproachTime: '',
        expectEndTime: ''
      },
      formRules: {
        formSupervisorCode: [{ required: true, message: '请选择形象督导', trigger: 'change' }],
        expectEndTime: [{ required: true, message: '请选择预计完成时间', trigger: 'change' }],
        actualApproachTime: [{ required: true, message: '请选择进场时间', trigger: 'change' }]
      }
    }
  },
  computed: {
    detail() {
      if (this.selData.length > 0) {
        return this.selData[0]
      } else {
        return {}
      }
    }
  },
  watch: {
    'selData'(v) {
      if (v.length === 1) { this.formData.expectEndTime = v[0].expectEndTime }
    }
  },
  methods: {
    changeData(data) {
      this.orgInfo = data.orgName
    },
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepClone(this.selData[0])
        data.formSupervisorCode = this.formData.formSupervisorCode
        data.formSupervisorName = this.formData.formSupervisorName
        data.actualApproachTime = this.formData.actualApproachTime
        data.expectEndTime = this.formData.expectEndTime
        return postInside(data).then(res => {
          this.$message.success('操作成功！')
          this.$emit('on-success')
          this.$refs.dialog.visible = false
        })
      })
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    },
    changeHandle(v) {
      if (v.length > 0) {
        v = v[0]
      } else {
        v = {}
      }
      this.formData.formSupervisorCode = v.formSupervisorCode
      this.formData.formSupervisorName = v.formSupervisorName
    },
    closedHandle() {
      this.$refs.form.resetFields()
    }
  }
}
</script>
